<template>
  <BasePanel title="基本信息" :one="true">

    <Row type="flex" justify="space-between">
      <Col flex="820px">
        <table class="show-table">
          <colgroup>
            <col width="136">
            <col width="275">
            <col width="136">
            <col width="275">
          </colgroup>
          <tr>
            <td class="key">项目类别</td>
            <td>{{detail?.prjType}}</td>
            <td class="key">项目区划</td>
            <td>{{detail?.prjArea}}</td>
          </tr>
          <tr>
            <td class="key">详细地址</td>
            <td colspan="3">{{detail?.address}}</td>
          </tr>

          <tr>
            <td class="key">立项文号</td>
            <td>{{detail?.prjApprovalNum}}</td>
            <td class="key">立项级别</td>
            <td>{{detail?.prjApprovalLevel}}</td>
          </tr>
          <tr>
            <td class="key">立项批复机关</td>
            <td>{{detail?.prjApprovalDep}}</td>
            <td class="key">立项批复时间</td>
            <td>{{ parseTime(detail?.prjApprovalDate) }}</td>
          </tr>

          <tr>
            <td class="key">建设单位</td>
            <td>{{detail?.buildCorpName}}</td>
            <td class="key">建筑节能信息</td>
            <td>{{ detail?.jzjnInfo }}</td>
          </tr>
          <tr>
            <td class="key">建设单位统一社会信用代码</td>
            <td>{{detail?.buildCorpCode}}</td>

            <td class="key">建设用地规划许可证编号 </td>
            <td>{{detail?.buildPlanNum}}</td>

          </tr>
          <tr>
            <td class="key">总投资（万元）</td>
            <td>{{detail?.allInvest}}</td>
            <td class="key">项目用途</td>
            <td>{{detail?.prjFunction}}</td>

          </tr>
          <tr>
            <td class="key">总面积（平方米)</td>
            <td>{{ detail?.allArea }}</td>
            <td class="key">总长度（米）</td>
            <td>{{ detail?.allLength }}</td>
          </tr>
          <tr>
            <td class="key">建设性质</td>
            <td>{{detail?.prjProperty}}</td>
            <td class="key">是否重点项目</td>
            <td>{{ detail.isMajor=='1'?'重点项目':'非重点项目' }}</td>
          </tr>
          <tr>
            <td class="key">计划开工日期</td>
            <td>{{ parseTime(detail?.beginDete)}}</td>
            <td class="key">计划竣工日期</td>
            <td>{{ parseTime(detail?.endDate)}}</td>
          </tr>
          <tr>
            <td class="key">建设规模</td>
            <td colspan="3">{{ detail?.prjSize }}</td>

          </tr>
        </table>
      </Col>
      <Col flex="330px">
        <div class="flex h-100p">
          <div id="map" v-if="detail.location" class="map"></div>
          <div class="map noData" v-else></div>
          <p>项目地址：{{detail?.address}}</p>
        </div>
      </Col>

    </Row>
  </BasePanel>
</template>

<script lang="ts">
import {defineComponent, toRefs, watch , PropType } from 'vue';
import {Row, Col} from 'ant-design-vue';
import {BasePanel} from '/@/components/panelComponent/index';
import AMapLoader from '@amap/amap-jsapi-loader';
 import { parseTime } from '/@/utils';
interface BaseModel {
  address?:string;//详细地址
  allArea	?:string;//总面积（平方米）
  allInvest	?:string;//总投资（万元）
  allLength	?:string;//总长度（米）
  beginDete	?:string;//计划开工日期(date-time)
  buiLicNum	?:string;//施工许可证
  buildCorpCode?:string;//建设单位机构代码
  buildCorpName	?:string;//建设单位
  buildPlanNum?:string;//建设用地规划许可证编号
  endDate	?:string;//计划竣工日期(date-time)
  invproperty	?:string;//工程投资性质
  isMajor?:	string;//是否重点项目1：重点项目 0：非重点项目
  jzjnInfo?:string;//建筑节能信息
  location?:string;//经纬度
  locationX?:string;//项目坐标(经度)项目坐标(纬度)
  locationY?:string;//
  prjApprovalDate?:string;//立项批复时间(date-time)
  prjApprovalDep?:string;//立项批复机关
  prjApprovalLevel?:string;//立项级别
  prjApprovalNum?:string;//立项文号
  prjArea?:string;//所在区划
  prjFunction?:string;//工程用途
  prjId?:	string;//id
  prjName?:string;//项目名称
  prjProperty?:string;//建设性质
  prjSize?:string;//建设规模
  prjType?:string;//项目类别
  projectPlanNum?:string ;//建设工程规划许可证编号
}
export default defineComponent({
  components: { BasePanel , Row , Col },
  props : {
    detail:{
      type: Object as PropType<BaseModel>,
      default: {}
    }
  },
  setup(props) {
    const { detail } = toRefs(props);
    watch(detail, (cur)=> {
      let longLatitude:any = cur.location;
      if(longLatitude){
        const position = longLatitude.split(',').map(Number);
        AMapLoader.load({
          key: "38b3eb45ad036a8f2351115465fd35a8",
          version: "1.4.15",
          plugins: [],
          AMapUI: {
            version: '1.1',
            plugins:[],
          }
        }).then( AMap => {
          let map = new AMap.Map('map', {
            zoom:15,
            center: position
          });
          let infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30)});
          let marker = new AMap.Marker({
            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_r.png",
            position: position
          });
          marker.content = '这里是地址';
          marker.on('click', function(e){
            infoWindow.setContent(e.target.content);
            infoWindow.open(map, e.target.getPosition());
          });
          map.add(marker);
        }).catch(e => {
          console.log(e);
        })
      }

    })
    return {
      detail, parseTime
    }
  },
})
</script>

<style lang="less" scoped>
::v-deep(.base-panel) {
  .base-panel__header {
    margin-bottom: 13px;
  }
}

.ant-tabs {
  margin-top: -60px;

  ::v-deep(.ant-tabs-nav-scroll) {
    display: flex;
    flex-direction: row-reverse;
  }
}

.show-table{
  width: 100%;
  border: 1px solid #f0f0f0;

  tr{
    td{
      height: 50px;
      padding: 5px 15px;
      vertical-align: center;
      border: 1px solid #EAEAEA;

      &.key{
        background: #F3F3F3;
      }

    }
  }
}

.flex{
  flex-wrap: wrap;

  .map{
    width: 100%;
    height: 510px;
  }

  p{
    width: 100%;
    margin: 5px 0 0 0;
    color: #000;
  }
}

.noData{
  background: #fcfcfc url('/@/assets/img/nodata.png') no-repeat center;
  border: 1px solid #EAEAEA;
}
</style>
